import React from 'react';
import { Icon, IconElement, TopNavigation, TopNavigationAction } from '@ui-kitten/components';
import { useRouter } from 'expo-router';

const BackIcon = (props): IconElement => (
  <Icon
    {...props}
    name='arrow-back'
  />
);

const BackAction = (): React.ReactElement => {
  const router = useRouter()
  const goBack = () => {
    router.back()
  }
  return <TopNavigationAction icon={BackIcon} onPress={goBack}/>
}
const TopNavigationSimpleUsageShowcase = (props): React.ReactElement => (
  <TopNavigation
    alignment='center'
    accessoryLeft={props.left !== false ? BackAction: undefined}
    title={props.title}
  />
);

export  default TopNavigationSimpleUsageShowcase